<template>
	<!-- 自定义导航栏 -->
	<CustomNavBar title="通知信息,在这里可以查看信息" />
	<up-empty text="当前无通知信息" icon="/static/emptyData.png">
	</up-empty>
	<up-cell-group v-for="notice in noticeList">
		<up-cell :title="notice.senderName+notice.content" :value="user?.username" :label="notice.targetContent"
			@click="doPostInfo(notice.targetId,notice.id)" is-link>
			<template #right-icon v-if="notice.noticeState===0">
				<up-icon name="warning" color="red" size="20px" />
			</template>
		</up-cell>
	</up-cell-group>
</template>
<script setup lang="ts">
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import { ref } from "vue";
	import { getCurrentUser } from "@/services/user"; // 引入 getCurrentUser 方法
	import { myWebSocket } from "@/config/myWebSocket"; // WebSocket 配置
	import myAxios from "@/plugins/myAxios"; // Axios 封装
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 数据和状态
	const user = ref(null); // 当前用户信息
	const loading = ref(false);
	const notices = ref([]);
	const noticeList = ref([]);

	/**
	 * 页面加载时初始化
	 */
	onLoad(async () => {
		await initUser(); // 获取当前用户
		await init(); // 初始化通知
	});

	/**
	 * 刷新通知列表
	 */
	const onRefresh = async () => {
		loading.value = false;
		await init();
	};

	/**
	 * 初始化用户信息
	 */
	const initUser = async () => {
		try {
			const res = await getCurrentUser();
			if (res?.code === 0) {
				user.value = res.data; // 保存当前用户信息
			} else {
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none',
					duration: 2000,
				});
			}
		} catch (error) {
			uni.showToast({
				title: '用户请求异常',
				icon: 'none',
				duration: 2000,
			});
		}
	};

	/**
	 * 初始化通知列表
	 */
	const init = async () => {
		try {
			const res = await myAxios.get('/notice/list');
			if (res?.code === 0 && res) {
				notices.value = res.data;
				noticeList.value = getNoticeList(notices.value);
				console.log(noticeList.value);
			} else {
				uni.showToast({
					title: '加载失败' + (res.description ? `,${res.description}` : ''),
					icon: 'none',
					duration: 2000,
				});
			}
		} catch (error) {
			uni.showToast({
				title: '请求异常',
				icon: 'none',
				duration: 2000,
			});
		}
	};

	/**
	 * 封装通知信息类型
	 * 信息类型：1为评论，2为回复评论，3为点赞，4为系统通知
	 * @param noticeList
	 */
	const getNoticeList = (noticeList : []) => {
		noticeList = JSON.parse(JSON.stringify(noticeList));
		for (let temp in noticeList) {
			const contentType = noticeList[temp].contentType;
			if (contentType === 1) {
				noticeList[temp].content = ' 评论: ' + noticeList[temp].content;
			} else if (contentType === 2) {
				noticeList[temp].content = ' 回复: ' + noticeList[temp].content;
			} else if (contentType === 3) {
				noticeList[temp].content = ' 点赞: ' + noticeList[temp].content;
			} else if (contentType === 4) {
				noticeList[temp].content = ' 系统通知: ' + noticeList[temp].content;
			}
		}
		return noticeList;
	};

	/**
	 * 标记通知为已读
	 */
	const readPost = async (noticeId : number) => {
		try {
			await myAxios.post('/notice/update', {
				id: noticeId,
				noticeState: 1,
			});
		} catch (error) {
			uni.showToast({
				title: '标记失败',
				icon: 'none',
				duration: 2000,
			});
		}
	};

	/**
	 * 跳转到帖子详情
	 */
	const doPostInfo = (postId : number, noticeId : number) => {
		uni.navigateTo({
			url: `/pages/forum/detail?id=${postId}`,
		});
		readPost(noticeId);
	};
</script>
<style>
</style>